<template>
    <div class="vue-search"  v-bind:style="{width:styleObject.width+'px', height: styleObject.height+'px'}">
      <input type="text" :placeholder="inputholder" v-model="query" :style="{width:inputW+'px'}" v-on:keyup.enter="search">
      <i class="fa fa-search" v-on:click="search"></i>
    </div>
</template>


<script>
export default {
  name: 'Search',
  data() {
    return {
      query: '',
      inputW: 150,
    }
  },
  props: {
    styleObject : {
      type : Object,
      default : {
          width : 184,
          height : 26
      }
    },
    inputholder: {
      type : String,
      default : '搜索' 
    }
  },
  watch: {
    styleObject: {
      immediate: true,
      handler(val) {
        this.inputW = val.width - 34
      }
    },
  },
  methods: { 
      search: function() {
          // 触发当前实例上的事件
          this.$emit('fullSearch',this.query);
      }
  }
}
</script>


<style>
.vue-search {
  margin: 0;
  padding: 0;
  display: inline-block;
  border: 1px solid #B3C1D8;
  background: #fff;
  border-radius: 4px;
  line-height: 100%;
  overflow: hidden;
  position: relative;
}

.vue-search input {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  line-height: 100%;
  outline: none;
  font-size: 12px;
  text-indent: 10px;
  color: #4C5565;
}

.vue-search > i {
  display: inline-block;
  width: 12px;
  height: 16px;
  background: url('assets/images/search.svg') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin: -6px 10px 0px 10px;
}
:-moz-placeholder { color: #B3C1D8; opacity:1;}
::-moz-placeholder { color: #B3C1D8; opacity:1;}
input:-ms-input-placeholder { color: #B3C1D8; opacity:1;}
input::-webkit-input-placeholder{ color: #B3C1D8; opacity:1;}
</style>